<template>
    <div>
        <el-table
                :data="tableData"
                :span-method="objectSpanMethod"
                style="width: 100%;height: 600px" border>
            <el-table-column v-for="header in tableHeaderChildData" show-overflow-tooltip :key="header.id"
                             :label="header.label" :prop="header.prop" align="center">
                <el-table-column v-for="i in header.children" :key="i.id" show-overflow-tooltip :label="i.label"
                                 :prop="i.prop" align="center">
                    <!--原有方法导致排序错误，固定写死-->
                    <!--<TableColumn v-bind:tableHeaderChildData="i.children"></TableColumn>-->
                    <el-table-column v-for="y in i.children" :key="y.id" show-overflow-tooltip :label="y.label"
                                     :prop="y.prop" align="center">
                        <el-table-column v-for="a in y.children" :key="a.id" show-overflow-tooltip :label="a.label"
                                         :prop="a.prop" align="center">
                            <el-table-column v-for="b in a.children" :key="b.id" show-overflow-tooltip :label="b.label"
                                             :prop="b.prop" align="center">
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    /* eslint-disable no-console */
    import TableColumn from '@/views/my-components/TableColumn.vue'

    export default {
        name: 'table-header',
        props: ['tableHeaderChildData', 'tableData'],
        components: {
            TableColumn
        },
        data() {
            return {
                colMerge: [],
                rowMerge: ''
            };
        },
        methods: {
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                for (let c of this.colMerge) {
                    if (columnIndex === c) {
                        if (rowIndex === 0) {
                            return {
                                rowspan: this.rowMerge,
                                colspan: 1
                            };
                        } else {
                            return {
                                rowspan: 0,
                                colspan: 0
                            };
                        }
                    }
                }
            },
            getMergeData(pageSizeMid, col) {
                this.colMerge = col;
                this.rowMerge = pageSizeMid;
            }
        }
    }
</script>

<style>

</style>